.x-nav-bar {
	position: relative;
	background-color: $nav-bar-background-color;
	user-select: none;

	.x-icon {
		color: $nav-bar-icon-color;
		vertical-align: middle;
	}
	
	&--fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}
	
	&__bar{
		display: flex;
		align-items: center;
		height: $nav-bar-height;
		position: relative;
	}

	&__arrow {
		min-width: 1em;
		font-size: $nav-bar-arrow-size;

		+ .x-nav-bar__text {
			// margin-left: -20px;
			// padding-left: 25px;
		}
	}

	&__title {
		max-width: 60%;
		margin: 0 auto;
		color: $nav-bar-title-text-color;
		font-weight: $font-weight-bold;
		font-size: $nav-bar-title-font-size;
	}

	&__left,
	&__right {
		position: absolute;
		bottom: 0;
		font-size: $font-size-md;
		cursor: pointer;
		height:100%;
		display: flex;
		align-items: center;
	}

	&__left {
		// left: $padding-md;
		left: 0;
	}

	&__right {
		// right: $padding-md;
		right: 0;
	}

	&__text {
		display: inline-block;
		// margin: 0 -$padding-md;
		padding: 0 $padding-md;
		color: $nav-bar-text-color;
		vertical-align: middle;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		// &:active {
		// 	background-color: $active-color;
		// }
	}
}
